<template>
    <div id="app">
        <router-view name="login" keep-alive></router-view>
        <el-container style="min-height:100vh">
            <el-header style="padding: 0">
                <Inline-Head></Inline-Head>
            </el-header>
            <el-aside :width="w" style="background-color: #2e2e2e;position: fixed;height: 100%;top: 0;">
                <My-Menu></My-Menu>
            </el-aside>
            <el-container style="border-left: 1px solid #e6e6e6;" :style="{marginLeft:w}">
                <bread-crumb></bread-crumb>
                <el-main style="padding-top: 0;">
                    <transition name="fade-transform" mode="out-in">
                        <router-view class="child-view"/>
                    </transition>
                </el-main>
                <el-footer>
                    <Inline-Foot></Inline-Foot>
                </el-footer>
            </el-container>
        </el-container>

    </div>
</template>

<script>
    import MyMenu from '@/components/common/menu'
    import InlineHead from '@/components/common/inlineHead'
    import InlineFoot from '@/components/common/inlineFooter'
    import breadCrumb from '@/components/common/breadCrumb'
    import {mapGetters} from 'vuex'
    import waves from '@/directive/vWaves'

    export default {
        name: 'app',
        components: {
            MyMenu, InlineHead, InlineFoot, breadCrumb
        },
        directives: {
            waves
        },
        computed: {
            w() {
                if (this.isCollapsed) {
                    return '64px'
                } else {
                    return '200px'
                }
            },
            ...mapGetters(['isCollapsed'])
        },
        data() {
            return {
                transitionName: 'slide-left'
            }
        },
        watch: {
            '$route'(to, from) {
                const toDepth = to.path.split('/').length;
                const fromDepth = from.path.split('/').length;
                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
            }
        }
    }
</script>

<style>
    body {
        background: #f6;
        box-sizing: border-box;
    }

    body, html, ul, li {
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    .el-table {
        color: #000 !important;

    }

    td {
        padding: 4px 0 !important;
    }

    .child-view {
        flex: 1;
        height: 100%;
    }

    #app {
        min-height: 100vh;
    }

    .fade-transform-enter-active, .fade-transform-leave-active {
        opacity: 0;
        transition: all ease .7s;
        transform: translate(-80px, 0);
    }

    .fade-transform-leave-to, .fade-transform-enter {
        opacity: 0;
        transform: translate(100%, 0);
    }

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    .my-input {
        width: 80% !important;
    }

    .flex-content {
        flex: 1;
    }
</style>
